<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 头部区域 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5525宿舍 - 宿舍故事</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* CSS from previous examples can be reused here */
        #wish-wall {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        #wish-wall h2 {
            color: #333;
        }

        textarea {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            height: 100px;
        }

        #wishes-list li {
            margin-top: 10px;
            padding: 5px;
            border: 1px solid #eee;
            border-radius: 4px;
        }

        /* 统一图片大小 */
        .story-item img {
            width: 300px;
            height: 200px;
            object-fit: cover;
        }

        /* 框住故事部分 */
        .story-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            width: 48%;
            /* 修改宽度，使其一行可以容纳两个 */
            display: inline-block;
            /* 使其可以在一行显示 */
            box-sizing: border-box;
            /* 包含内边距和边框 */
        }

        /* 框住未来期许部分 */
        .future-wishes {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
        }

        .story-container {
            display: flex;
            /* 使用flex布局 */
            flex-wrap: wrap;
            /* 允许换行 */
            justify-content: space-between;
            /* 两端对齐，元素之间的间隔相等 */
        }
    </style>
</head>

<body>
    <!-- 头部导航区域 -->
    <header>
        <div class="logo">
            <img src="img/宿舍logo.jpg" alt="宿舍 Logo">
            <h1>5525</h1>
            <h3>一个青春活力的家</h3>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                    <ul class="dropdown">
                        <li><a href="#">成员组成</a></li>
                        <li><a href="#">值日表</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                    <ul class="dropdown">
                        <li><a href="#">每日小知识</a></li>
                        <li><a href="#">宿舍公约</a></li>
                        <li><a href="#">生活小贴士</a></li>
                        <li><a href="#">互动板块</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                    <ul class="dropdown">
                        <li><a href="#">宿舍心愿墙</a></li>
                        <li><a href="#">难忘时刻</a></li>
                        <li><a href="#">宿舍未来</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                    <ul class="dropdown">
                        <li><a href="#">活动投票</a></li>
                        <li><a href="#">留言板</a></li>
                        <li><a href="#">课程表</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="search-box">
            <input type="text" placeholder="搜索">
            <button><i class="fas fa-search"></i></button>
        </div>
    </header>
<!-- 合照 -->
<div class="group-photo">
    <img src="img/合照.jpg" alt="合照">
</div>
    <!-- 主体区域 -->
    <main>
        <section id="wish-section">
            <div id="wish-wall">
                <h2>宿舍心愿墙</h2>
                <textarea id="wish" placeholder="写下你的心愿..."></textarea>
                <button onclick="postWish()">发布心愿</button>
                <ul id="wishes-list"></ul>
            </div>
        </section>
        <section id="story-section">
            <h2>难忘时刻</h2>

            <div class="story-item">
                <h3>海边班级团建</h3>
                <img src="img/宿舍故事/海边班级团建1.jpg" alt="海边班级团建1">
                <p>记得那是一个阳光明媚的周末，我们班级决定去海边团建。
                    到达目的地后，我们分工合作，架烤炉、生火、烤食物。
                    在海边，我们一起玩耍、拍照，留下了许多美好的瞬间。
                    那天晚上，我们围坐在海滩上，聊着各自的梦想，感叹着友谊的美好。</p>
            </div>

            <div class="story-item">
                <h3>生日庆祝</h3>
                <img src="img/宿舍故事/生日庆祝.jpg" alt="生日庆祝">
                <p>每当宿舍成员过生日，我们都会精心准备生日派对。有一次，我们为寿星准备了一个惊喜：提前在宿舍布置好生日氛围，买了蛋糕和礼物。当寿星回到宿舍时，感动得热泪盈眶。我们共同为他唱生日歌，分享蛋糕，度过了一个难忘的夜晚。
                </p>
            </div>

            <div class="story-item">
                <h3>贴对联挂灯笼</h3>
                <img src="img/宿舍故事/贴对联挂灯笼1.jpg" alt="贴对联挂灯笼1">
                <p>元旦期间，我们宿舍一起贴对联、挂灯笼，共度佳节。那段时间，宿舍里洋溢着浓厚的节日氛围。</p>
            </div>

            <div class="story-item">
                <h3>宿舍火锅</h3>
                <img src="img/宿舍故事/宿舍吃火锅.jpg" alt="宿舍吃火锅">
                <p>寒冷的冬天，我们宿舍会在周末举行火锅盛宴。大家围坐在一张桌子旁，一边涮火锅，一边聊天。热气腾腾的火锅驱散了冬日的寒冷，让我们感受到了家的温暖。</p>
            </div>


            <h2>宿舍未来</h2>
            <p>时光荏苒，转眼间，我们即将毕业。面对未来， 5525 宿舍的成员们有着各自的期许和祝福：</p>
            <ul class="future-wishes">
                <li>杨芳威：希望我们宿舍的每个人都能找到理想的工作，实现自己的人生价值。</li>
                <li>陈星宏：愿我们的友谊长存，无论走到哪里，都能记得5525 这个温馨的宿舍。</li>
                <li>郭起安：祝愿大家未来一切顺利，勇敢追求梦想，不忘初心。</li>
                <li>陈维国：希望我们毕业后还能时常相聚，共同分享彼此的生活喜悦。</li>
                <li>秦敏彬：愿我们的未来充满无限可能，每个人都能找到属于自己的舞台，发光发热。</li>
                <li>梁定凯：希望我们宿舍的每个人都能保持联系，即使毕业了，也要像家人一样关心彼此。</li>
            </ul>
            <p>5525 宿舍，这个充满欢声笑语的地方，将永远留在我们的记忆深处。未来的日子，愿我们携手共进，共创美好未来！</p>
        </section>
    </main>

    <!-- 底部区域 -->
    <footer class="footer">
        <ul class="footer-menu">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                <ul class="dropdown">
                    <li><a href="#">成员组成</a></li>
                    <li><a href="#">值日表</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                <ul class="dropdown">
                    <li><a href="#">每日小知识</a></li>
                    <li><a href="#">宿舍公约</a></li>
                    <li><a href="#">生活小贴士</a></li>
                    <li><a href="#">互动板块</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                <ul class="dropdown">
                    <li><a href="#">宿舍心愿墙</a></li>
                    <li><a href="#">难忘时刻</a></li>
                    <li><a href="#">宿舍未来</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                <ul class="dropdown">
                    <li><a href="#">活动投票</a></li>
                    <li><a href="#">留言板</a></li>
                    <li><a href="#">课程表</a></li>
                </ul>
            </li>
        </ul>
        <div class="footer-contact">
            <p>宿舍: 5525宿舍</p>
            <p>联系方式: dorm@example.com</p>
            <p>电话: 123-456-7890</p>
        </div>
        <div class="footer-copyright">
            <p>Copyright&copy;2025 5525宿舍版权所有</p>
        </div>
    </footer>
</body>

<!-- 脚本区域 -->
<script>
    function postWish() {
        const wishText = document.getElementById('wish').value;
        if (wishText.trim() !== '') {
            const wishesList = document.getElementById('wishes-list');
            const li = document.createElement('li');
            li.innerText = wishText;
            wishesList.appendChild(li);
            document.getElementById('wish').value = '';
        }
    }

</script>

</html>